<div class="search-ui absolute top-0 left-0 w-full h-full bg-white dark:bg-gray-800 hidden">
  <div class="container max-w-3xl mx-auto p-12">
    <div class="relative">
      <div class="my-4 text-center text-2xl font-bold">Search</div>

      <span class="p-2 absolute right-0 top-0 cursor-pointer close-search">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
          stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <line x1="18" y1="6" x2="6" y2="18" />
          <line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </span>
    </div>

    <input type="search" class="py-2 px-3 w-full dark:text-black border dark:border-transparent"
      placeholder="Enter search query" />

    <div class="search-results text-lg font-medium my-4 hidden">Results</div>
    <ul class="search-list my-2">

    </ul>

    <div class="no-results text-center my-8 hidden">
      <div class="text-xl font-semibold mb-2">No results found</div>
      <p class="font-light text-sm">Try adjusting your search query</p>
    </div>
  </div>
</div>

{{ $fuse := resources.Get "js/fuse.min.js" }}
{{ $search := resources.Get "js/search.js" }}

{{ $concatjs := slice $fuse $search | resources.Concat "js/scripts.js" | resources.Minify }}
<script src="{{ $concatjs.Permalink }}"></script>